<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        button{
            border-radius: 10px;
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
        #post{
            background-color: #803fa8; /* Green */
        }
        #all{
            background-color: #47c62f; /* Green */
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="page-header">jQuery 发送 ajax 请求</h2>
    <hr>
    <button id="get">GET</button>
    <button id="post">POST</button>
    <button id="all">通用型方法</button>
</div>

<script>
    $('button').eq(0).click(function () {
        $.get('http://localhost:8000/jquery-server',{a:100,b:200},function (data) {
            console.log(data);
        },'json');
    });

    $('button').eq(1).click(function () {
        $.post('http://localhost:8000/jquery-server',{a:100,b:200},function (data) {
            console.log(data);
        })
    });

    $('button').eq(2).click(function () {
        $.ajax({
            //url
            url:'http://localhost:8000/jquery-server',
            //发送参数
            data:{a:100,b:100},
            //请求类型
            type:'GET',
            //响应体设置
            dataType:'json',
            success:function (data) {
                console.log(data);
            }
            // error:function () {
            //
            // },

        });
    });
</script>
</body>
</html>